<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>Treeview - Ace Admin</title>

		<meta name="description" content="with selectable items(single &amp; multiple) and custom icons" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/font-awesome.min.css" />

		<!-- page specific plugin styles -->

		<!-- text fonts -->
		<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/ace-fonts.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/ace.min.css" id="main-ace-style" />

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/ace-part2.min.css" />
		<![endif]-->
		<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/ace-rtl.min.css" />

		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->
		<script src="${pageContext.request.contextPath}/static/assets/js/ace-extra.min.js"></script>

		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="${pageContext.request.contextPath}/static/assets/js/html5shiv.min.js"></script>
		<script src="${pageContext.request.contextPath}/static/assets/js/respond.min.js"></script>
		<![endif]-->
	</head>

	<body>
		<div class="main-content" > 
		</br>
				<table id="sample-table-1"
										class="table table-striped table-bordered table-hover">
										<thead>
											<tr>
												<td colspan="11">
												<button type="button" class="btn btn-primary add-subject">
													<span class="glyphicon glyphicon-user"></span> 
													<spring:message code="page.index.add" />
												</button>
												</td>
											</tr>
											<tr>
												<th>科目编号</th>
												<th>科目名</th>
												<th>科目描述</th>
												<th>科目题数</th>
												<th>总时长</th>
												<th>满分总分</th>
												<th>是否开启考试</th>						
												<th class="hidden-480"><spring:message
														code="user.action.message" /></th>
											</tr>
										</thead>
										<tbody>
											<c:forEach items="${subjectList }" var="subject">
												<tr>
													<td>${subject.subId}</td>
													<td>${subject.name }</td>
													<td>${subject.description}</td>
													<td>${subject.testCount}</td>
													<td>${subject.totalTime}</td>
													<td>${subject.totalScore}</td>
												<td><c:choose>
													<c:when test="${subject.status ==0 }">
													<input type="checkbox" name="switch-file-1"
													class="ace ace-switch ace-switch-6 status-checkbox" />
													<span class="lbl">${subject.status}</span>
													</c:when>
													<c:otherwise>
														<input type="checkbox" name="switch-file-1"
														class="ace ace-switch ace-switch-6 status-checkbox"
														checked="checked" />
														<span class="lbl">${subject.status}</span>
													</c:otherwise>
												</c:choose></td>	
																							
													<td><button class="btn btn-success show-subject btn-xs">
															<span class="glyphicon glyphicon-list-alt"></span>
														</button>&nbsp;
														
														<button class="btn btn-info edit-subject btn-xs">
															<span class="glyphicon glyphicon-pencil"></span>
														</button>&nbsp;
														
														<a title="管理科目学生" class="btn btn-primary btn-xs manage-subject-btn"><i class="ace-icon fa fa-users"></i></a>	
														
														<button class="btn btn-danger delete-subject btn-xs">
															<span class="glyphicon glyphicon-trash">
															</span>
														</button></td>
												</tr>
											</c:forEach>								
										</tbody>
									</table>
			</div><!-- /.main-content -->
			
				<!-- 模态框显示信息 -->
					<div class="modal fade" id="showSubjectModal" tabindex="-1"
						role="dialog" aria-labelledby="showSubjectModalLabel"
						aria-hidden="true" data-backdrop="static">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal"
										aria-hidden="true">&times;</button>
									<h4 class="modal-title" id="myModalLabel">查看详细信息</h4>
								</div>
								<!-- 在这里添加一些文本 -->
								<div class="modal-body">						
									<label  style="font-weight: bold;">科目编号：&nbsp;&nbsp;</label><span class="subId"></span><br/>
									<label  style="font-weight: bold;">科目名：&nbsp;&nbsp;</label><span class="name"></span><br/>
									<label  style="font-weight: bold;">科目描述：&nbsp;&nbsp;</label><span class="description"></span><br/>
									<label  style="font-weight: bold;">科目题数：&nbsp;&nbsp;</label><span class="testCount"></span><br/>
									<label style="font-weight: bold;">总时长：&nbsp;&nbsp;</label><span class="totalTime"></span><br/>
								<label  style="font-weight: bold;">满分总分：&nbsp;&nbsp;</label><span class="totalScore"></span><br/>
								<label  style="font-weight: bold;">是否开启考试：&nbsp;&nbsp;</label><span class="status"></span><br/>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default"
										data-dismiss="modal">关闭</button>
								</div>
							</div>
							<!-- /.modal-content -->
						</div>
						<!-- /.modal -->
					</div>
					<!-- 模态框显示单个END -->
					
		<!-- 添加试题-模态框(Modal) -->
	<div class="modal fade" id="addSubjectModel" tabindex="-1" role="dialog"
		aria-labelledby="addSubjectModalLabel">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="model-title" id="addSubjectModalLabel">添加科目</h4>
				</div>
				<div class="modal-body">
					<form id="addSubjectForm" method="post">
					
						<p>
							<label>科目名:&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<input type="text" name="name"/>
						</p>
						<p>
							<label>科目描述:&nbsp;&nbsp;</label>
							<input type="text"  name="description" />
						</p>
						<p>
							<label>科目题数:&nbsp;&nbsp;</label>
							<input type="text" name="testCount"/>
						</p>			
							<p>
							<label>总时长:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<input type="text" name="totalTime" />
						</p>
						<p>
							<label>满分总分&nbsp;&nbsp;</label>
							<input type="text" name="totalScore" />
						</p>
						<p>
							<label>是否开启考试:</label>
							<input type="text" name="status"/>
						</p>
			
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="addSubjectSaveBtn" type="button" class="btn btn-primary">保存</button>
				</div>
			</div>
		</div>
	</div>   
					
	<!-- 修改试题-模态框(Modal) -->
	<div class="modal fade" id="editSubjectModel" tabindex="-1" role="dialog"
		aria-labelledby="editSubjectModalLabel">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="model-title" id="editSubjectModalLabel">修改试题</h4>
				</div>
				<div class="modal-body">
					<form id="editSubjectForm" method="post">
						<input type="hidden" id="hiddenId" name="subId" />
						
						<p>
							<label>科目名:&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<input type="text" name="name"/>
						</p>
						<p>
							<label>科目描述:&nbsp;&nbsp;</label>
							<input type="text"  name="description" />
						</p>
						<p>
							<label>科目题数:&nbsp;&nbsp;</label>
							<input type="text" name="testCount"/>
						</p>			
							<p>
							<label>总时长:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<input type="text" name="totalTime" />
						</p>
						<p>
							<label>满分总分&nbsp;&nbsp;</label>
							<input type="text" name="totalScore" />
						</p>
						<p>
							<label>是否开启考试:</label>
							<input type="text" name="status"/>
						</p>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="editSubjectSaveBtn" type="button" class="btn btn-primary">保存</button>
				</div>
			</div>
		</div>
	</div>  	
						
		  	<!-- 管理学生科目 -->	
	<div class="modal fade" id="subjectStudentModel" tabindex="-1"
		role="dialog" aria-labelledby="manageSubjectModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;
						</button>
						<h4 class="modal-title" id="subjectStudentModelLabel">
						管理学生科目:<label id="modalSubjectName"></label>
						</h4>
						<label id="modalSubjectName"></label>
					</div>
					<div class="modal-body">
						<input id="subjectId"  type="hidden" />
						<div id="subjectStudentContent" class="control-group"></div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button id="subjectStudentSaveBtn" type="button"
							class="btn btn-primary">保存</button>
					</div>
			</div>
			<!-- /.modal-content -->
		</div>
</div>
		
		
		<script type="text/javascript">
			$(".show-subject").click(function() {
				var subjectId = $(this).parent().siblings().eq(0).text();
				$.ajax({
					type : 'POST',
					url : '${contextPath}/OnlineExam/subjectById',
					data : {
						subjectId : subjectId
					},
					dataType : "json",
					success : function(data){
						$('#showSubjectModal .subId').text(data.subId);
						$('#showSubjectModal .name').text(data.name);
						$('#showSubjectModal .description').text(data.description);
						$('#showSubjectModal .testCount').text(data.testCount);
						$('#showSubjectModal .totalTime').text(data.totalTime);
						$('#showSubjectModal .totalScore').text(data.totalScore);
						$('#showSubjectModal .status').text(data.status); 
					}
				});
				$("#showSubjectModal").modal('show');
			});
			</script>
			
	<script type="text/javascript">
			//触发添加摸态框
			$('.add-subject').click(function(){
				
				$('#addSubjectModel').modal('show');	
			});
			
			//保存并添加试题
			$('#addSubjectSaveBtn').click(function(){
				/* if($('#addTestForm').valid()){ //前台校验 */				
					var subId = $('#addSubjectForm input[name="subId"]').val();
					var name = $('#addSubjectForm input[name="name"]').val();
					var description = $('#addSubjectForm input[name="description"]').val();
					var testCount = $('#addSubjectForm input[name="testCount"]').val();
					var totalTime = $('#addSubjectForm input[name="totalTime"]').val();
					var totalScore = $('#addSubjectForm input[name="totalScore"]').val();
					var status = $('#addSubjectForm input[name="status"]').val();
			
					$.ajax({ //通过后传到后台
						type: 'POST',
						url: '${contextPath}/OnlineExam/saveSubject',
						data: {
							subId:subId,
							name: name,
							description: description,
							testCount: testCount,
							totalTime: totalTime,
							totalScore: totalScore,
							status: status		
						},
						dataType: "json",
						success: function(data){
							//判断成功与否
							if(data.success){
								alert('添加成功');
								window.location.reload();
							}else{
								alert('添加失败！-');
							}
						}
					});	
				//}
			});
			
			//触发修改摸态框
			$('.edit-subject').click(function(){
				var subId = $(this).parent().siblings().eq(0).text();
				$("#hiddenId").val(subId);
				$('#editSubjectModel').modal('show');	
			});
			
			//保存并修改试题
			$("#editSubjectSaveBtn").click(function(){
				
				var subId = $('#editSubjectForm input[name="subId"]').val();
				var name = $('#editSubjectForm input[name="name"]').val();
				var description = $('#editSubjectForm input[name="description"]').val();
				var testCount = $('#editSubjectForm input[name="testCount"]').val();
				var totalTime = $('#editSubjectForm input[name="totalTime"]').val();
				var totalScore = $('#editSubjectForm input[name="totalScore"]').val();
				var status = $('#editSubjectForm input[name="status"]').val();
				$.ajax({ //通过后传到后台
					type: 'POST',
					url: '${contextPath}/OnlineExam/updataSubject',
					data: {
						subId:subId,
						name: name,
						description: description,
						testCount: testCount,
						totalTime: totalTime,
						totalScore: totalScore,
						status: status		
					},
					dataType: "json",
					success: function(data){
						//判断成功与否
						if(data.success){
							alert('修改成功');
							window.location.reload();
						}
					}
				});	
			//}
		});
			
			$(".delete-subject").click(function() {
				var subId = $(this).parent().siblings().eq(0).text();
				if(confirm('你确定要删除该行的信息？')){
				$.ajax({
					type : 'POST',
					url : '${contextPath}/OnlineExam/deleteSubject',
					data : {
						subId : subId
					},
					dataType : "json",
					success: function(data){
						//判断成功与否
						if(data.success){
							alert('删除成功');
							window.location.reload();
						}else{
							alert('删除失败')
							window.location.reload();
						}
					},	
					error:function(){
						alert('no');
					}
				});	
				}
			});
			
			//状态改变
			$('.status-checkbox').on('click',function(){
				$validation = this.checked;
				var subId = $(this).parent().siblings().eq(0).text();
				var status;
				if(this.checked){
					status = 1;
				}else{
					status = 0;
				}
				
				$.ajax({
					type : 'POST',
					url : '${ContextPath}/OnlineExam/updataStatus',
					data : {
						subId : subId,
						status : status		
					},
					dataType : "json",
					success : function(){
						window.location.reload();
					},
					error:function(){
						alert('on');
					}					
				});
			});
			
			//点击管理学生科目按钮时，读取所有学生姓名和学号
			$('.manage-subject-btn').click(function(){
				//获取当前选择行的科目
				var subId = $(this).parents("td").siblings("td").eq(0).text();
				
				$.ajax({
					//通过传到后台
				type : 'POST',
				url : '${contextPath}/OnlineExam/getAllStudent',
				data:{
					subId : subId
				} ,
				dataType : "json",
				success: function(data){
					var htmlString = '';
					var selectedUser = data.selectedUser;
					//得到所有这个科目关联的学生

					for(var i= 0; i<data.allUser.length;i++){
						var user = data.allUser[i];
						var checked = checkSelectedUser(selectedUser, user.userId) ? 'checked="checked" ' :'';
						htmlString += '<div class="checkbox">';
						htmlString += '<label>';
						htmlString += '<input name="subjectStudents" class="ace cae-checkbox-2" type="checkbox" value="'
										+user.userId+ '" ' +checked + ' />';
						htmlString +=  '<span class="lbl"> '+user.userName + '</span>';
						htmlString += '<label>';
						htmlString +='</div>';			
					}
					//把所有学生加入到弹出框 subhectStudentModel 里面的内容区，即subjectStudentContent里面
					$('#subjectStudentContent').html(htmlString);
					$('#subjectId').val(subId);
				}	
			});	 
				
				$('#modalSubjectName').text($(this).parents("td").siblings("td").eq(1).text());
				$('#subjectStudentModel').modal('show');
			});
			
			function checkSelectedUser(array,str){
				for(var i = 0; i<array.length; i++){
					if(array[i] == str)
					return true;
				}
				return false;
			}
			
			
			//修改学生的勾选后，点击保存按钮
			$('#subjectStudentSaveBtn').on('click', function(){
				var subjectId=$("#subjectId").val();
				var subjectStudents = [];
				//获取所有当前已经勾上的学生的学号
				for(var i = 0;i< $('input[name="subjectStudents"]:checked').length; i++){
					subjectStudents[i] = $($('input[name="subjectStudents"]:checked')[i]).val()
				}
				$.ajax({
					type: 'POST',
					url: '${contextPath}/OnlineExam/saveSubjectStudents',
					data:{
						subjectStudents: subjectStudents,//把所有勾选上的学号以数组形式传到后台
						subjectId: subjectId
					},
					dataType: 'json',
					success: function(data){
						//判断成功于否
						//前台代码就这样
						if(data.success){
							window.location.reload();
							alert('成功');
							//$('#subjectStudentModal').modal('hide');
						}else{
							alert('失败');
						}
					}
				});
			});
			
			</script>
	</body>
</html>
